<template>
  <div class="wrapper">
    <el-main>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <div class="adMain btn">
        <el-button type="primary" plain @click='onCreat()'>创建思维导图</el-button>
        <el-button v-if="!userInfo" type="primary" plain @click="toLogin">去登录</el-button>
      </div>
      <div class="adMain">  
        <video class='videoItem' src="../assets/ad.mp4" autoplay></video>
      </div>
    </el-main>
  </div>
</template>

<script>

export default {
  name: "home",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('user')) || null,
    };
  },
  methods: {
    toLogin() {
      this.$emit('toLogin')
    },
    onCreat(){
      this.$router.push('/map')
      // this.maplist++
    },
  },
};
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0;
  // min-height: 85vh;
  // background: #ffffff;

  //     display: flex;
  // justify-content: center;
  // align-items: center;
  .adMain {
    &.btn {
      margin: 20px;
    }
    .videoItem{
      // width: 100%;
    height: 400px;
    }
  }
  .el-carousel__item {
    background: #409eff;
  }
}
</style>
